import VueRouter from 'vue-router'
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

const router = new VueRouter({
    mode:'history',
    routes:[
        {
            name:'myAbout',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'myHome',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:"myNews",
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'},
                    // beforeEnter(to,from,next){
                    //     if (to.meta.isAuth) {
                    //         if (localStorage.getItem('username')=='trent') {
                    //             next()
                    //         }else{
                    //             alert('用户名不正确')
                    //         }
                    //     }else{
                    //         next()
                    //     }
                    // }
                },
                {
                    name:'myMessage',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'myDetail',
                            path:'detail',
                            component:Detail,
                            // props的第一种写法：对象，该对象中所有key-value都会以props形式传给detail组件
                            // props:{a:1,b:'hello'}

                            // props第二种写法：布尔，若布尔值为真，会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true

                            // props第三种写法：函数
                            // props(){
                            //     return {
                            //         id:'666',
                            //         title:'sss'
                            //     }
                            // }
                            // 
                            // props($route){
                            //     return {id:$route.query.id,title:$route.query.title}
                            // }
                            // 简写一
                            props({query}){
                                return {id:query.id,title:query.title}
                            },
                            meta:{isAuth:true,title:'详情'},
                            // 简写二
                            // props({query:{id,title}}){
                            //     return {id,title}
                            // }
                        }
                    ]
                },
            ]
        },
    ]
})

// 全局前置路由守卫
// router.beforeEach((to,from,next)=>{
//     console.log('前置守卫',to,from);
    
//     if (to.meta.isAuth) {
//         if (localStorage.getItem('username')=='trent') {
//             next()
//         }else{
//             alert('用户名不正确')
//         }
//     }else{
//         next()
//     }

// })

// router.afterEach((to,from)=>{
//     console.log('后置守卫',to,from)
//     document.title = to.meta.title || '测试系统'
// })

export default router